// webpack的配置文件
// webpack的配置文件是基于NodeJs的，需要使用Commonjs规范
const path = require("path");

// 插件和转换器一样需要安装
// 插件必须要引入到配置文件里面
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // mode选项是用来选择开发环境的
  // production或者development
  mode: "production",

  // entry选项是用来规定项目的入口文件的位置
  // 默认值是./src/index.js
  entry: "./src/main.js",

  // output选项用来定义出口的位置
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
  },

  // loader
  // webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
  // loader转换器要使用module选项
  module: {
    // rules里面写转换的规则
    rules: [
      { test: /\.txt$/, use: "raw-loader" },
      {
        test: /\.css$/i,
        // style-loader是将转过去的js重新变成css
        // 当需要用到多个转换器的时候，要写数组，先用到的要写到后面
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  // 插件(plugin)
  // loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/public/index.html"),
    }),
  ],

  // 配置的内容可以直接写在对象里面
  devServer: {
    port: 5173,
    open: true,
  },
};
